let form = layui.form
const E = window.wangEditor
const editor = new E("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 500;
editor.create()



// todo 获取编辑 id 发送ajax请求
// console.log(location.search);
const id = location.search.split('?')[1]
// console.log(id);


axios.get('/my/article/cates')
    .then(res => {
        // console.log(res)
        // 需要把option 的value值设置为对应得Id
        const str = res.data.data.map((res) => `
    <option value="${res.Id}">${res.name}</option>
    `).join('')
        //把option内容放到下拉框中 html() 方法可以使用 但会覆盖原有内容 建议使用 append 
        $('#cateSelect').append(str)

        form.render('select'); //刷新select选择框渲染



        axios.get(`/my/article/${id}`)
            .then(({
                data: {
                    data
                }
            }) => {
                console.log(data)
                form.val("form", data)
                // var data = form.val("form")
                editor.txt.html(data.content)

            })
    })
// todo =======================裁切区域=========================
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)


// ====================================选择封面===========================
// !点击按钮 触发文件选择框的点击事件
$('#btnChooseCoverImage').click(function () {
    $('#fileCover').click()
})

// ======================更换裁切区域的图片================
// 步骤
// 1.给文件选择框注册 change 事件
// 2.去获取到用户选择的文件
// 3.把文件对象转换为img图片地址

// 1.
$('#fileCover').on('change', function () {
    // 2.
    const file = this.files[0]
    // console.log(file);

    if (!file) return
    // 3.
    const imgSrc = URL.createObjectURL(file)
    // console.log(imgSrc);

    // $image.attr('src',imgSrc) 无法实现
    // 需要先销毁旧的裁剪区域 之后按照新的图片地址重新生成裁剪区域（预览图片）
    $image
        .cropper('destroy') // 销毁旧的裁剪区域
        .attr('src', imgSrc) // 重新设置图片路径
        .cropper(options) // 重新初始化裁剪区域
})

// todo =================发布或存为草稿===========================
// 1.给form表单注册submit事件
$('#form').on('submit', function (e) {

    // 2.阻止默认行为
    e.preventDefault()

    // 3.收集表单数据 (serialize FormData) 按照接口文档要求采用FormData
    const fd = new FormData(this)

    // 收集不到的数据 可以通过append追加
    // editor.txt.html() 获取内容带标签
    fd.append('content', editor.txt.html())

    fd.append('state', state)
    fd.append('Id',id)
    // 收集裁剪图片
    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据
            // 收集
            fd.append('cover_img', blob)

            // 了解即可 方便查看fd收集到的数据

            // !代码位置
            axios.post('/my/article/edit', fd)
                .then(({
                    data
                }) => {
                    // console.log(res)
                    if (data.status !== 0) {
                        return layer.msg(data.message)
                    }

                    layer.msg(data.message, {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        //do something
                        location.href = '/article/art_list.html'
                    });
                })
            // fd.forEach(function(value,name){
            // console.log(value,name);
            // })
        })
})

// 文章状态的收集
// 看点击了什么按钮
// 给按钮注册点击事件
// 声明一个变量来存状态数据
let state

// 发布按钮
$('#btnPublish').click(function () {
    state = '已发布'
})

// 草稿
$('#btnSave').click(function () {
    state = '草稿'
})